<template>
  <el-card>
    <div class="app">
      <div class="app-add-btn">
        <el-button size="medium" type="primary" @click="openaddarticle">新增面试技巧</el-button>
      </div>
      <div>
        <el-row class="search-line" :gutter="20">
          <el-col :span="6">
            <el-input size="medium" class="addskillsbyn" placeholder="请输入题目编号/题干" v-model="keyword">
              <template slot="prepend">关键字</template>
            </el-input>
          </el-col>
          <el-col :span="6">
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-col>

          <!-- 增加面试技巧按钮 -->
          <el-col :span="6">
            <div class="search-line-empty">fsdfsdfds</div>
          </el-col>

          <!-- 搜索按钮和清楚按钮 -->
          <el-col :span="6">
            <div class="search-line-btn">
              <el-button plain class="clearbtn" @click="resetInput">清除</el-button>
              <el-button type="primary" class="searchbtn" @click="onLoading">搜索</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 表格区域 -->
      <div>
        <el-table :data="tableData" border style="margin-top:20px">
          <el-table-column type="index" label="序号" width="100px"></el-table-column>
          <el-table-column prop="title" label="标题">
            el-icon-film
            <template #default="{row}">
              <div>
                {{row.title}}
                <i class="el-icon-film" v-if="row.videoURL" @click="openvideoURL(row.videoURL)"></i>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="visits" label="阅读数" width="150px"></el-table-column>
          <el-table-column prop="username" label="录入人" width="150px"></el-table-column>
          <el-table-column label="录入时间" width="280px">
            <template #default="{row}">
              <div>{{row.createTime | formatTime}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态" width="138px">
            <template #default="{row}">
              <div>{{row.state | isuseing}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="操作" width="250px">
            <template v-slot="slot">
              <el-button type="text" @click="openarticledetails(slot.row.id)">预览</el-button>
              <el-button type="text" @click="changedisable(slot.row)" v-if="slot.row.state===1">禁用</el-button>
              <el-button type="text" @click="changedisable(slot.row)" v-else>启用</el-button>
              <el-button type="text" @click="openchangearticle(slot.row.id)" :disabled="slot.row.state===0?true:false">修改</el-button>
              <el-button type="text" @click="deletearticle(slot.row.id)" :disabled="slot.row.state===0?true:false">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页区域 -->
      <div class="block" style="margin-top:20px">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="pagesize" layout="->,prev,pager, next,sizes, jumper" :total="total"></el-pagination>
      </div>
      <!-- 修改/新增文章弹出框 -->
      <el-dialog :title="changeaddstate+'文章'" :visible.sync="changearticleVisible" width="70%">
        <changedialog :changeruleForm="changeruleForm" :changerules="changerules" :changeId="changeId" @surechange="surechange" @canclechange="canclechange" :changeaddstate="changeaddstate"></changedialog>
      </el-dialog>
      <!-- 预览文章弹出框 -->
      <el-dialog title="预览文章" :visible.sync="articledetailsVisible" width="70%" @before-close="articledetailscancle">
        <articledetailsdialog :articledetailsdata="articledetailsdata"></articledetailsdialog>
      </el-dialog>
      <div class="video">
        <el-dialog title :visible.sync="articlevideoVisible" width="70%">
          <div class="toast" style="width:100%;height:300px">
            <iframe frameborder="0" :src="videoURL" allowfullscreen="true" style="width:100%;height:300px" v-if='articlevideoVisible'></iframe>
          </div>
        </el-dialog>
      </div>
    </div>
  </el-card>
</template>

<script>
import { getinterviewList, changearticlestate, articledetails, deleteinterviewList } from '@/assets/api/Interview/interview.js';
import changedialog from '@/views/Interview-skills/components/addchangedialog';
import articledetailsdialog from '@/views/Interview-skills/components/articledetailsdialog';
// import 'quill/dist/quill.core.css'
// import 'quill/dist/quill.bubble.css'
// import * as Quill from 'quill'; // 富文本基于quill
export default {
  components: {
    changedialog,
    articledetailsdialog,
  },
  data () {
    return {
      changeaddstate: '修改',
      total: 0,
      changeruleForm: { name: '', content: '', address: '' },
      changerules: {
        name: [{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],
        content: [{ required: true, min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }],
        address: [{ type: 'url', min: 3, max: 50, message: '请输入正确的网址', trigger: 'blur' }],
      },
      page: 1,
      pagesize: 10,
      tableData: [],
      // 搜索关键词
      keyword: '',
      // 状态选择器数据
      options: [
        {
          value: '1',
          label: '已启用',
        },
        {
          value: '0',
          label: '已禁用',
        },
      ],
      // 是否禁用状态
      value: null,
      // 删除弹出框是否可见
      dialogVisible: false,
      // 要删除项的id
      deleteId: 0,
      // 要修改项的id
      changeId: 0,
      changearticleVisible: false,
      articledetailsVisible: false,
      articledetailsdata: {},
      articlevideoVisible: false,
      videoURL: '',
    };
  },
  // {
  //   title: 123,
  //   articleBody: 123,
  //   videoURL: 123,
  // }
  created () {
    this.onLoading();
  },
  methods: {
    surechange () {
      this.onLoading();
      this.changearticleVisible = false;
    },
    canclechange () {
      this.changearticleVisible = false;
    },
    async openchangearticle (id) {
      this.changeId = id;
      const { data } = await articledetails(id);
      this.changeruleForm.name = data.title;
      this.changeruleForm.content = data.articleBody;
      this.changeruleForm.address = data.videoURL;
      this.changeaddstate = '修改';
      this.changearticleVisible = true;
    },
    handleCurrentChange (val) {
      this.page = val;
      this.onLoading();
    },
    handleSizeChange (val) {
      this.pagesize = val;
      this.onLoading();
    },
    async onLoading () {
      try {
        const { data } = await getinterviewList({
          page: this.page,
          pagesize: this.pagesize,
          keyword: this.keyword,
          state: this.value,
        });
        this.total = data.counts;
        this.tableData = data.items;
        this.keyword = null;
        this.value = null;
      } catch (err) {
        this.$message.error(err);
      }
    },
    resetInput () {
      this.keyword = null;
      this.value = null;
    },
    deletearticle (id) {
      this.$confirm('确认要删除这篇文章么', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          await deleteinterviewList(id);
          this.onLoading();
          this.dialogVisible = false;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    async changedisable (row) {
      if (row.state === 1) {
        row.state = 0;
      } else {
        row.state = 1;
      }
      try {
        await changearticlestate(row.id, row.state);
        this.onLoading();
      } catch (err) {
        this.$message.error(err);
      }
    },
    openaddarticle () {
      this.changeaddstate = '添加';
      this.changearticleVisible = true;
    },
    async openarticledetails (id) {
      this.articledetailsVisible = true;
      const { data } = await articledetails(id);
      this.articledetailsdata = data;
    },
    openvideoURL (videoURL) {
      this.videoURL = videoURL;
      this.articlevideoVisible = true;
    },
    canceldelete () {
      this.dialogVisible = false;
    },
    articledetailscancle () {
      this.articledetailsVisible = false;
    },
  },
  filters: {
    isuseing (val) {
      if (val === 1) {
        return '已启用';
      } else {
        return '已禁用';
      }
    },
  },
};
</script>

<style lang="less" >
.search-line-btn {
  display: flex;
  justify-content: flex-end;
}

.search-line-empty {
  visibility: hidden;
}

.app {
  .app-add-btn {
    margin-bottom: 20px;
  }

  .addskillsbyn {
    font-size: 12px;
    width: 304px;
    height: 40px;
    .el-input__inner {
      height: 100%;
    }
  }
  .el-dialog__header {
    background-color: #409eff;
  }
  .el-icon-film {
    color: blue;
  }
  .video {
    .el-dialog__header {
      background-color: #fff;
    }
  }
}
</style>
